<template>
  <div class="exchangeRate">
    <assets-head :title="$t('汇率设置')" />
    <div v-for="(item, index) in exchangeratelist_get_data" :key="index"
      class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 " @click="handleSetLang(item)">
      <div class="lang-title flex items-center font-26 textColor">
        <img class="w-55 h-55 mr-24" :src="item.image" alt="">
        {{ item.currency }}
      </div>

      <img class="w-40 h-40 lh-40" v-if="item.currency == show_ex" src="../../assets/image/public/checked.png" />
    </div>
  </div>
</template>
<script>
import AxiosexchangeRate from "@/API/exchangeRate";
import assetsHead from "@/components/assets-head";
import { mapActions } from "vuex";
import { SET_CURRENCY } from "@/store/const.store";

export default {
  data() {
    return {
      show_ex: {},
      list: [
        { title: 'USD', key: 'USD' },
        { title: 'CNY', key: 'CNY' },
        { title: 'ERU', key: 'ERU' },
        { title: 'JPY', key: 'JPY' }
      ],
      exchangeratelist_get_data: []
    }
  },
  components: {
    assetsHead
  },
  mounted() {
    this.init()
  },
  methods: {
    ...mapActions('home', [SET_CURRENCY]),
    init() {
      this.show_ex = this.$store.state.home.currency.currency
      this.exchangeratelist_get()
    },
    exchangeratelist_get() {
      const t = this
      AxiosexchangeRate.exchangeratelist({}).then((res) => {
        console.log(res.data)
        t.exchangeratelist_get_data = res.data
        t.exchangeratelist_get_data.forEach((item) => {
          item.image = require('../../assets/image/exchange-rate/' + item.currency + '.png')
        })
      })
    },
    handleSetLang(e) {
      // console.log(t.$store.state.exchangeRate.exchangeRate)
      const t = this
      AxiosexchangeRate.exchangerateuserconfig({ rateId: e.id }).then((res) => {
        if (res.code == 0) {
          // t.$store.commit('setExchangeRate',e)
          this.SET_CURRENCY()
          t.show_ex = e.currency
        }

      })

    },
    onClickLeft() {
      this.$router.go(-1)
      console.log(this.$i18n.locale)
    },
  }
}
</script>
<style lang="scss" scoped>
.exchangeRate {
  width: 100%;
  box-sizing: border-box;
}

.lang-padding {
  @include themify() {
    border-bottom: 1px solid themed("line_color");
  }

  font-weight: 400;
  color: #000000;
}
</style>
